<template>
    <div class="app-datetime-picker">
        <ion-item>
            <ion-label></ion-label>
            <ion-datetime 
                display-format="YYYY-MM-DD HH:mm:ss" 
                :value="value" 
                :placeholder="placeholder" 
                :disabled="disabled"
                @ionChange="valueChange($event)"
                cancel-text="取消"
                done-text="完成"
            ></ion-datetime>
        </ion-item>
    </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';
const moment = require('moment');


@Component({
    components: {
      
    }
})
export default class AppDateTimePicker extends Vue {

        /**
         * 传入值
         *
         * @type {string}
         * @memberof AppDateTimePicker
         */
        @Prop() public value?:string;

        /**
         * 是否禁用
         *
         * @type {boolean}
         * @memberof AppDateTimePicker
         */
        @Prop() public disabled?:boolean;

        /**
         * placeholder
         *
         * @type {boolean}
         * @memberof AppDateTimePicker
         */
        @Prop() public placeholder?:string;

        /**
         *时间选择改变
         *
         * @param event{*}
         * @memberof AppDateTimePicker
         */
        public valueChange(event:any){
            this.$emit('change',event.detail.value);
        }
}
</script>
<style lang="less">
@import './app-datetime-picker.less';
</style>